#include('header.html', {title: '主页', index: true})
<!-- 课程导航 悬浮 start-->
<link href="http://cdn.lkangle.cn/css/index.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.lkangle.cn/css/slider.css">
<script src="http://cdn.lkangle.cn/js/slider.js" type="text/javascript"></script>

<style>
  .notice-box ul {
    width: 100%;
  }
  .notice-box li {
    width: 100%;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    padding-left: 22px;
    background: url("/static/img/notice.png") 0 0 no-repeat;
    background-size: 20px 20px;
    cursor: pointer;
    margin-bottom: 7px;
  }
  .notice-box li:hover {
    color: #0b900d;
  }
</style>
<!-- 课程导航 end-->
<div id="index" class="es-wrap">
  <span id="top"></span>
  <!--幻灯片-->
  <hr class="category-line">
  <section>
    <div id="myDiv" style="margin: 0 auto;">
      <ul ref="imgs">
        <li style="background-image: url('/static/img/mc.jpg')"></li>
      </ul>
    </div>
  </section>

  <!-- 热门课程 -->
  <section style="padding-top: 20px;" class="box-item push-section">
    <div class="container">
      <div class="i-course-label">
        <span>热门课程</span>
        <i class="line">|</i>
        <a class="i-course-nav" href="/allClass" target="_blank">全部课程</a>
      </div>
      <!-- 右侧 开始 -->
      <div class="row">
        <template v-if="sysAnns.length > 0">
          <div class="col-sm-10 col-xs-12">
            <course-item v-for="c in hots" :course="c" :type="'hot'" :key="c.id"></course-item>
          </div>
          <div class="col-sm-2 hidden-xs">
            <div class="notice-box">
              <ul class="list-unstyled" style="max-height: 160px; overflow:hidden;">
                <li v-for="(sa, index) in sysAnns" @click="showAnn(index)">{{sa.content}}</li>
              </ul>
            </div>
          </div>
        </template>
        <template v-else-if="sysAnns.length <= 0">
          <div class="col-sm-12 col-xs-12">
            <course-item v-for="c in hots" :course="c" :type="'hot'" :key="c.id"></course-item>
          </div>
        </template>
      </div>
      <!-- 右侧 结束-->
    </div>
  </section>

  <!-- 新上好课 -->
  <section class="i-course-list-section push-section">
    <div class="container">
      <div class="i-course-label">
        <span>新上好课</span>
        <i class="line">|</i>
        <a class="i-course-nav" href="/allClass" target="_blank">全部课程</a>
      </div>
      <!-- 右侧 开始 -->
      <div class="row">
        <div class="col-xs-12">
          <course-item v-for="c in news" :course="c" :type="'new'" :key="c.id"></course-item>
        </div>
      </div>
      <!-- 右侧 结束-->
    </div>
  </section>

  <!-- 系统访问量统计 -->
  <section>
    <div class="container">
      <div class="index-stat">
        <span>今日访客: ${tdView} 历史访客: ${allView}</span>
      </div>
    </div>
  </section>


  <div style="display: none" id="ann-panel">
    <div>
      <div class="panel-body" style="height: 120px;overflow-y: auto;">{{ann.content}}</div>
      <div class="panel-footer">
        <div class="text-right" style="font-size: 12px;color: #a3a3a3;">公告发布于：{{ann.time}}</div>
      </div>
    </div>
  </div>
</div>
<template id="course-item">
  <div class="course-card col-lg-1-5 col-md-3 col-xs-6">
    <div :class="'i-course-item course-' + type">
      <a :href="'/course/'+course.id+'/info'" target="_blank">
        <div class="i-course-img">
          <span class="tags">
            <span class="tag-serialing"></span>
          </span>
          <img :src="course.cover" class="img-responsive">
        </div>
        <div class="i-course-info">
          <div class="i-course-title">
            <span>{{course.name}}</span>
          </div>
          <div class="i-course-time">
            <span class="txt over_span168">
              <span class="course-price-widget">
                <span style="color: #999;">{{course.time.substr(0,10)}}</span>
              </span>
            </span>
          </div>
          <div class="i-course-metas">
            <span>
              <i class="es-icon es-icon-playcircleoutline"></i>{{course.views}}
            </span>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script type="text/javascript">
  var IndexVm = new Vue({
    el: '.es-wrap',
    data: {
      hots: [],
      news: [],
      images: [],
      sysAnns: [], // 系统公告
      ann: {} // 当前显示的公告
    },
    components: {
      'course-item': {
        props: ['course', 'type'],
        template: '#course-item'
      }
    },
    methods: {
      showAnn: function (index) {
        this.ann = this.sysAnns[index];
        layer.open({
          type: 1,
          title: '系统公告',
          area: ['400px', '200px'],
          content: $('#ann-panel')
        })
      }
    },
    created: function () {
      var self = this;
      $.post('/course/api/public/page', {type: 'hot'}, function (data) {
        if (data.success) {
          self.hots = data.payload.rows;
        }
      }); //
      $.post('/course/api/public/page', {type: 'new'}, function (data) {
        if (data.success) {
          self.news = data.payload.rows;
        }
      }); //
      $.post('/admin/bigImage/page', {page: 1, size: 8}, function (data) {
        if (data.success) {
          var $ibox = $(self.$refs.imgs);
          $ibox.html('');
          self.images = data.payload.rows;
          $.each(self.images, function (i, v) {
            var path = v.path;
            var h = '<li style="background-image: url(' + path + ')"></li>';
            $ibox.append(h);
          });
        }
        $('#myDiv').SliderImg({
          Type: 'fade',
          BtnAlign: 'right'
        });
      }); //
      
      $.post('/user/teacher/announcement/anns', function (data) {
        if (data.success) {
          self.sysAnns = data.payload.rows;
        }
      })
    }
  });
</script>
#include('footer.html')
